import React from 'react'
import { Outlet,NavLink } from 'react-router-dom';
import { Tabbar } from 'react-vant';
import { FriendsO, HomeO, Search, SettingO } from '@react-vant/icons';

export default function Home() {
    return (
        <div className='wrap'>
            <header className='header'>
                home
            </header>
            <main className='main'>
                <Outlet></Outlet>
            </main>
            <footer className='footer'>
                <div className='demo-tabbar'>
                    <Tabbar>
                        <Tabbar.Item icon={<HomeO />}>
                            <NavLink to='/home/index'>首页</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon={<Search />}>
                             <NavLink to='/home/car'>购物车</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon={<FriendsO />}>
                            <NavLink to='/home/class'>会员</NavLink>
                        </Tabbar.Item>
                        <Tabbar.Item icon={<SettingO />}>
                            <NavLink to='/home/my'>我的</NavLink>
                        </Tabbar.Item>
                    </Tabbar>
                </div >
            </footer>

        </div>
    
  )
}
